import React, {PureComponent} from 'react'
import echarts from 'echarts';
import '../../util/world'
import {setTitle, scale, tooltip, mapLineStyle, mapEffectStyle, baseTextStyle} from '../chart/util/common'
import baseChart from '../chart/base-chart'

function getBaseGauge(value, title) {
    return {
        name: title,
        center: ['50%', '50%'],
        radius: '50%',
        "type": "gauge",
        "splitNumber": 10,
        "axisLine": {
            "lineStyle": {
                "color": [
                    [1, "#fff"],
                ],
                "width": 0
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            "distance": 0,
            "textStyle": {
                "color": "#eee"
            }
        },
        pointer: {
            show: false,
        },
        "itemStyle": {
            "normal": {
                "color": "#FEEE94"
            }
        },
        "detail": {
            show: false,
            "formatter": "{value}",
            "offsetCenter": [0, "20%"],
            "textStyle": {
                "fontSize": 40 * scale,
                "color": "#fff"
            }
        },
        "title": {
            show: false,
            "offsetCenter": [0, "100%"]
        },
        "data": [{
            "value": value
        }]
    }
}

function getBasePie(value1, title) {
    const value = 100
    return {
        "name": title,
        "type": 'pie',
        "radius": ['58%', '50%'],
        center: ['50%', '50%'],
        "avoidLabelOverlap": false,
        "startAngle": 225,
        "color": ["transparent", "transparent"],
        "hoverAnimation": false,
        "legendHoverLink": false,
        tooltip: {
            show: false
        },
        grid: {
            left: '5%',
            right: '5%',
            top: 36 * scale,
            bottom: '10%',
            containLabel: true
        },
        "label": {
            "normal": {
                "show": false,
                "position": 'center',
                "textStyle": {
                    "fontSize": '30',
                    "fontWeight": 'bold'
                }
            },
            "emphasis": {
                "show": true,
                "textStyle": {
                    "fontSize": '30',
                    "fontWeight": 'bold'
                }
            }
        },
        "labelLine": {
            "normal": {
                "show": false
            }
        },
        "data": [
            {
                "value": 0.75 * value,
                "name": '',
                tooltip: {
                    "formatter": `{a} <br/>${value}%`
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#DC4549'
                        }, {
                            offset: 0.5,
                            color: '#E7D878'
                        }, {
                            offset: 1,
                            color: '#07BF97'
                        }])
                    }
                }
            },

            {
                "value": 0.75 * (100 - value),
                tooltip: {
                    "formatter": `{a} <br/>${value}%`
                },
            },
            {
                "value": 25,
                tooltip: {
                    "formatter": `{a} <br/>${value}%`
                },
            }]
    }
}

function genBig(value, title) {
    const baseConfig = getBaseGauge(...arguments)
    const basePie = getBasePie(...arguments)

    return [
        Object.assign({}, baseConfig, {
            radius: '50%',
            axisTick: {
                show: true,
                length: 3 * scale,
                lineStyle: {
                    width: scale,
                    opacity: .4
                }

            }
        }),

        Object.assign({}, baseConfig, {
            radius: '55%',
            pointer: {
                show: true,
                width: 3 * scale
            },
            "splitNumber": 5,
            "axisLabel": {
                "distance": -25 * Math.pow((1 / scale), 3),

                "textStyle": {
                    "color": "#eee",
                    fontSize: 8 * scale
                }
            },
            "detail": {
                "formatter": "{value}%",
                "offsetCenter": [0, "50%"],
                "textStyle": {
                    "fontSize": 8 * scale,
                    "color": "#fff"
                }
            }
        }),
        Object.assign({}, basePie),
    ]
}


function genSmall(value, title, center) {
    const baseConfig = getBaseGauge(...arguments)
    const basePie = getBasePie(...arguments)
    return [
        Object.assign({}, baseConfig, {
            radius: '30%',
            "splitNumber": 20,
            center,
            detail: {
                "formatter": "{value}%",
                "offsetCenter": [0, "50%"],
                "textStyle": {
                    "fontSize": 6 * scale,
                    "color": "#fff"
                }
            },

            pointer: {
                show: true,
                width: 3 * scale,
                length: '60%'
            },
        }),

        Object.assign({}, basePie, {
            "radius": ['25%', '20%'],
            center,
        }),
    ]
}


class Dash extends PureComponent {
    constructor() {
        super()
    }

    shouldComponentUpdate(nextProps) {
        const {data, all} = nextProps
        let update = false
        data.data.forEach((d, i) => {
            if (d.percent !== this.props.data.data[i].percent) {
                update = true
            }
        })
        if (all.data !== this.props.all.data) {
            update = true
        }
        return update
    }

    renderData = (props)=>{
        const {data, all} = props
        const pos = [['16.25%', '85%'], ['38.75%', '85%'], ['61.25%', '85%'], ['83.75%', '85%']]
        return {
            title: {
                ...setTitle({text: data.title}),
            },
            series: genBig(all.data || 0, data.title)
                .concat(data.data.map((s, i) => genSmall(s.percent, s.title, pos[i]))
                    .reduce((a, b) => a.concat(b)))
        }
    }
    componentWillUpdate(nextProps) {
        const {data, all} = nextProps
        const pos = [['16.25%', '85%'], ['38.75%', '85%'], ['61.25%', '85%'], ['83.75%', '85%']]
        this.myChart.setOption(this.renderData(nextProps));
        // this.myChart.hideLoading()

        // config.option && this.myChart.setOption(config.option);

    }

    componentDidMount() {
        const {config, setChartInstance,all,data} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const option = {
            tooltip: {
                formatter: ""
            },
            title: {
                ...setTitle({text: '加载中'}),
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            },
            "series": [
                // ...genBig(0, '整机一次合格率'),
                // /*small-1*/
                // ...genSmall(0, 'small1', ['16.25%', '85%']),
                // ...genSmall(0, 'small1', ['38.75%', '85%']),
                // ...genSmall(0, 'small1', ['61.25%', '85%']),
                // ...genSmall(0, 'small1', ['83.75%', '85%']),
            ]
        }
        this.myChart.setOption(option)
        this.myChart.setOption(this.renderData(this.props));

        // this.myChart.showLoading({
        //     text: 'loading',
        //     color: '#c23531',
        //     textColor: '#fff',
        //     maskColor: 'rgb(29, 61, 73)',
        //     zlevel: 0
        // })
    }

    render() {
        return (
            <div ref="chart" style={{width: '100%', height: '100%'}}/>
        )
    }

}

export default baseChart(Dash)